<template>
  <div class="demo-date-picker">
    <el-date-picker v-model="valueList" type="dates" placeholder="选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
      :picker-options="pickerOptions" :disabled-date="isNoSelect" @visible-change="handleVisibleChange"
      @change="handleChange">
      <template #default="cell">
        <div class="cell"
          :class="{ current: isCurrent(cell.date), selected: isSelect(cell.date), noSelect: isNoSelect(cell.date)}">
          <div :class="{ current2: isCurrent(cell.date), selected2: isSelect(cell.date)}"> </div>
          <span class="text">{{ cell.text }}</span>
          <span v-if="isHoliday(cell.date)" class="holiday"></span>
        </div>
      </template>
    </el-date-picker>
  </div>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import dayjs from 'dayjs'

  const valueList = ref([])
  const holidays = [
    '2024-04-01',
    '2024-04-02',
    '2024-04-03',
    '2024-04-04',
    '2021-10-05',
    '2021-10-06',
    '2021-10-07',
  ]

  const selectValue = ref([])

  const isHoliday = (date) => {
    console.log(holidays.includes(dayjs(date).format('YYYY-MM-DD')))
    return holidays.includes(dayjs(date).format('YYYY-MM-DD'))
  }
  const isSelect = (date) => {
    if (valueList.value != null) {
      return valueList.value.includes(dayjs(date).format('YYYY-MM-DD'))
    }
  }

  const isNoSelect = (dataNo) => {
    const currentDate = dayjs().format('YYYY-MM-DD');
    const date1 = new Date(dataNo);
    // 使用 Day.js 将日期格式化为年-月-日的形式
    const formattedDate = dayjs(date1).format('YYYY-MM-DD');
    return formattedDate < currentDate;
  }

  const isCurrent = (date) => {
    const currentDate = dayjs().format('YYYY-MM-DD');
    const date1 = new Date(date);
    // 使用 Day.js 将日期格式化为年-月-日的形式
    const formattedDate = dayjs(date1).format('YYYY-MM-DD');
    return formattedDate === currentDate;
  }
  const pickerOptions = {
    disabledDate(time) {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth();
      const day = today.getDate();
      const todayTimestamp = new Date(year, month, day).getTime();
      return time > todayTimestamp;
    }
  }

  const handleChange = (value) => {
    // 在 change 事件中，暂存选择的日期
    valueList.value = value
  }

  const handleVisibleChange = (visible) => {
    console.log(visible)
    if (visible) {
      console.log('触发')
    } else {
      console.log('触发2')
      // const temSelectValue = selectValue.value
      // console.log(selectValue)
      // console.log('temSelectValue', temSelectValue.value)
      valueList.value = []
    }
  }

  const handleConfirm = () => {
    selectedDate.value = tempDate.value
  }
</script>

<style scoped>
  .cell {
    height: 30px;
    padding: 3px 0;
    box-sizing: border-box;
    position: relative;
  }

  .cell .text {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    line-height: 24px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }

  .cell.current .text {
    /* background: pink; */
    color: #409EFF;
    /* color: #fff; */
  }

  .cell.selected .text {
    background: #409EFF;
    color: #fff;
  }


  .cell .selected2 {
    background-color: #F2F6FC;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cell .holiday {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #4d9b29;
    border-radius: 50%;
    top: 4px;
    right: 4px;
    transform: translateX(-50%);
  }

  .noSelect {
    background-color: #F5F7FA;
    opacity: 1;
    cursor: not-allowed;
    color: #C0C4CC;
    z-index: 9999;
  }
</style>